<template>
  <el-card class="page-tools">
    <el-row type='flex' justify ='space-between' align = 'middle'>
        <el-col>
            <!-- before定义前面的插槽 -->
            <div class="before" v-if="showBefore">
               <i class="el-icon-info"></i>
               <slot name="before"/>
            </div>
        </el-col>
        <el-col>
            <!-- after定义后面的插槽 -->
            <el-row justify ='end' type='flex'>
             <slot name="after"/>
            </el-row>
        </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
    props: {
        showBefore:{
            default: false,
            type: Boolean
        }
    } 

}
</script>

<style lang='scss'>
 .page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
 }
</style>